<template>
  <div>
    <el-dialog v-model="dialogVisible" title="编辑用户" draggable style="border-radius: 8px;">
      <el-row :gutter="10" justify="center">
        <el-col :span="4"></el-col>
        <el-col :span="16">
          <el-form :model="form" label-width="120px" :label-position="`left`">
            <el-form-item label="用户UID">
              <el-input v-model="form.uid" :prefix-icon="Avatar" placeholder="UID" disabled/>
            </el-form-item>
            <el-form-item label="用户账号">
              <el-input v-model="form.username" :prefix-icon="Avatar" placeholder="账号" disabled/>
            </el-form-item>
            <el-form-item label="用户昵称">
              <el-input v-model="form.realname" :prefix-icon="EditPen" placeholder="请输入昵称"/>
            </el-form-item>
            <el-form-item label="用户密码">
              <el-input v-model="form.password" type="password" show-password :prefix-icon="Lock" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item label="用户手机">
              <el-input v-model="form.telephone" :prefix-icon="Iphone" placeholder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择你的性别">
                <el-option label="男" :value="1"/>
                <el-option label="女" :value="0"/>
              </el-select>
            </el-form-item>
            <el-form-item label="用户生日">
              <el-date-picker
                  type="date"
                  v-model="form.birthday"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="选择日期"/>
            </el-form-item>
            <el-form-item label="登录时间">
              <el-date-picker
                  v-model="form.logintime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="Pick a Date"
              />
            </el-form-item>
            <el-form-item label="注册时间" disabled>
              <el-input v-model="form.registertime" :prefix-icon="Iphone" disabled/>
            </el-form-item>
            <el-form-item label="用户角色">
              <el-select v-model="form.roleremark" placeholder="请选择你的角色">
                <el-option label="普通用户" :value="1"/>
                <el-option label="会员用户" :value="2"/>
              </el-select>
            </el-form-item>
            <el-form-item label="用户状态">
              <el-switch :active-value="1" :inactive-value="0" active-color="#13ce66"
                         inactive-color="#ff4949" v-model="form.status"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width: 100%" size="large" @click="onSubmit">编辑</el-button>
            </el-form-item>

          </el-form>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue'
import {Avatar, Lock, EditPen, Iphone} from "@element-plus/icons-vue";
import {handleCofirm} from "@/utils/confirm";
import {ElMessage} from "element-plus";
import {watch} from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  dialogTableValue: {
    type: Object,
    default: () => ({})
  }
});

let form = reactive({
  uid: String,
  username: String,
  password: String,
  realname: String,
  sex: Number,
  telephone: String,
  logintime: String,
  registertime: String,
  birthday: String,
  status: Boolean,
  roleremark: String,
})
const formLabelWidth = '140px'

watch(() => props.dialogTableValue, () => {
  form.uid = props.dialogTableValue.uid
  form.username = props.dialogTableValue.username
  form.password = props.dialogTableValue.password
  form.realname = props.dialogTableValue.realname
  form.sex = props.dialogTableValue.sex
  form.telephone = props.dialogTableValue.telephone
  form.logintime = props.dialogTableValue.logintime
  form.registertime = props.dialogTableValue.registertime
  form.birthday = props.dialogTableValue.birthday
  form.status = props.dialogTableValue.status
  form.roleremark = props.dialogTableValue.roleremark
}, {deep: true, immediate: true})

const emit = defineEmits(['changeDialog', 'Formdialog'])

const dialogVisible = computed({
  get: () => props.show,
  set: (newValue) => {
    emit('changeDialog', newValue)
  },
})

// 提交
const onSubmit = () => {
  handleCofirm().then(res => {
    ElMessage({type: 'success', message: '编辑成功！',})
    emit('changeDialog', false)
    emit('Formdialog', form)
  }).catch(err => {
    ElMessage({type: 'info', message: '取消编辑！',})
  })
}

</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
